<template>
  <div>

    <van-nav-bar title="我的购物车"
                 left-text="返回"
                 left-arrow
                 @click-left="onClickLeft"
                 v-if="action == 'cart'" />
    <van-nav-bar title="购物车"
                 v-else />

    <!-- 全选 -->
    <van-checkbox-group v-model="checked"
                        ref="checkboxGroup">
      <!-- <van-checkbox name="a">复选框 a</van-checkbox>
    <van-checkbox name="b">复选框 b</van-checkbox> -->
      <van-swipe-cell v-for="item of CartData"
                      :key="item.id">
        <!-- 价格和商品名 -->
        <van-card :price="item.total"
                  :title="item.product.name"
                  class="goods-card">
          <template #thumb>
            <!-- 全选按钮 -->
            <van-checkbox :name="item.id"
                          @click="oncheck"></van-checkbox>
            <!-- 图片 -->
            <img :src="item.product.cover_cdn"
                 alt="">
          </template>

          <template #num>
            <van-stepper v-model="item.nums"
                         :name="item.id"
                         theme="round"
                         @change="onChageNum"
                         button-size="22"
                         disable-input />
          </template>
          <template #tags>
            <span>数量 x {{item.nums}}</span>
          </template>
        </van-card>
        <template #right>
          <van-button square
                      text="删除"
                      type="danger"
                      @click="ondel(item.id)"
                      class="delete-button" />
        </template>
      </van-swipe-cell>
    </van-checkbox-group>
    <van-submit-bar :price="total"
                    button-text="提交订单"
                    @submit="onSubmit"
                    :class="action != 'cart' ? 'bottom' : ''">
      <van-checkbox v-model="checkAll"
                    @click="toggleAll"
                    checked-color="#ff0011"
                    v-if="checked.length > 0">取消全选</van-checkbox>
      <van-checkbox v-model="checkAll"
                    @click="toggleAll"
                    v-else>全选</van-checkbox>
    </van-submit-bar>
    <!-- 从购买界面进去的购物车界面不显示底部导航 -->
    <Menu v-if="action != 'cart'" />
  </div>
</template>
<script>
import Menu from 'components/common/Menus.vue'
export default {
  components:{
    Menu,
  },
  created() {
    let action = this.$route.query.action
    this.action = action
    this.CartList()
  },
  data() {
    return {
      action: '',
      LoginUser: this.$cookies.get('LoginUser'),
      CartData: [],
      checked: [],
      checkAll: false,
    }
  },
  computed: {
    // 提交订单按钮旁边的价格
    total() {
      if (this.checked.length <= 0) {
        return 0
      }
      let total = 0
      for (let item of this.CartData) {
        // console.log(item)
        // 用includes来检查this.checked中是否存在item.id
        // 确认是否全选
        if (this.checked.includes(item.id)) {
          // parseFloat获得一个包含浮点数的字符串
          total += parseFloat(item.total)
        }
      }
      return total * 100
    },
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1)
    },
    async CartList() {
      let data = {
        userid: this.LoginUser.id,
      }
      let result = await this.$api.CartIndex(data)
      console.log(result.data.CartList)
      if (result.code === 0) {
        this.$notify({
          type: 'danger',
          message: result.msg,
          duration: 1500,
        })
        return false
      }
      this.CartData = result.data.CartList
    },
    onSubmit() {
      if (this.checked.length <= 0) {
        this.$notify({
          type: 'danger',
          message: '请选择结算的商品',
          duration: 1500,
        })
        return false
      }
      let ids = this.checked.join(',')
      this.$router.push({ path: '/product/product/confirm', query: { ids: ids } })
    },
    ondel(id) {},
    toggleAll() {
      if (this.checked.length > 0) {
        // 取消全选
        this.$refs.checkboxGroup.toggleAll(false)
      } else {
        // 全选
        this.$refs.checkboxGroup.toggleAll(true)
      }
    },
    // 单选时修改全选/取消的状态
    oncheck() {
      if (this.checked.length) {
        this.checkAll = true
      } else {
        this.checkAll = false
      }
    },
    async onChageNum(value, name) {
      // console.log(value,name)
      let data = {
        nums: value,
        id: name.name,
      }
      let result = await this.$api.CartNums(data)
      console.log(result)
      this.CartList()
    },
  },
}
</script>
<style>
.goods-card {
  margin: 0;
  background-color: white;
}
.delete-button {
  height: 100%;
}
.van-card__thumb {
  display: flex;
  width: auto;
}
.van-card__thumb img {
  width: 108px;
  margin-left: 10px;
}
.bottom {
  bottom: 65px;
}
</style>